<template>
  <div>
    MusicItem
    <!--    <p>{{ $route.params.name }}</p>-->
    <p>{{ name }}</p>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: "MusicItem",
});

</script>

<script lang="ts" setup>
// 接受params参数
import {useRoute} from "vue-router";
import {computed} from "vue";

const route = useRoute()
// console.log(route)   // proxy对象 不能解构 会失去响应式

// 使用watch来监听route的改变,但是内部重新赋值的时候不能使用解构语法
/* const { title, id } = toRefs(route.query);
watch(route, () => {
  title.value = route.query.title;
  id.value = route.query.id;
}); */

// 使用组件内更新守卫 来完成监听route的改变
/* const { title, id } = toRefs(route.query);
onBeforeRouteUpdate(() => {
  title.value = route.query.title;
  id.value = route.query.id;
}); */

// 使用计算属性 得到 路由参数 最直接
const name = computed(() => {
  return route.params.name
})
</script>

<style lang="scss" scoped>

</style>